<template>
  <div class="rankingbox">
    <div class="ranking">
      <div class="flex_c_center">
        <div class="fontW-9 font-36 color-f mgt-30 font-f-ib">{{$t('ranking.text')}}</div>
        <div class="fontW-9 font-20 color-f mgtb-40 font-f-ib">{{$t('ranking.title')}}</div>
      </div>
      <div class="flex">
        <div>
          <el-container>
            <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
            <!-- <Menu :menuList="menuList" @changeData="changeData" :AsideType="AsideType" /> -->
            <!-- <home-menu :HomeList="HomeList" @changeData="changeData" :AsideType="AsideType" /> -->
            <rank-menu :menuList="HomeList" @changeData="changeData" />
            </el-aside>
          </el-container>
        </div>
        <div class="flex-1 mgr-5">
          <ranking-table class="font-f-ib" :rangData="rangData" ref='dataPage'/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Menu from '../../components/component/Menu'
import HomeMenu from '../../components/component/HomeMenu'
import RankMenu from '../../components/component/RankMenu'
import RankingTable from './components/RankingTable'
import {rankingData, rankmenu} from '../../mock/data'
export default {
  components: {
    Menu,
    HomeMenu,
    RankMenu,
    RankingTable
  },
  data () {
    return {
      HomeList: rankmenu,
      // rankingData: rankingData,
      isCollapseFlag: false,
      rankingData: rankingData,
      rangData: []
    }
  },
  created () {
    this.changeData()
  },
  methods: {
    changeData: function (val) {
      this.rangData = this.rankingData.slice(val * 3, 10)
    }
  }
}
</script>
<style lang="less"  scoped>

</style>
